Saetl.net

Simple And Easy TempLate

Slicebox 3D Image Sliderの使い方

  1. 下記ページの ｢Download source｣ よりファイル1式をダウンロード。
  2. ダウンロードしたファイルを任意の場所にコピー。
    ファイル構成
  3. 動作させるファイル（サンプルではindex.html）にコードを記述。
    ＜パスは上記ファイル構成の場合なので環境にあわせて変更＞
    ・head部分にcss,jsファイルを読み込ませるためのコードを記述。 
    <head>
<!--ダウンロードしたファイル-->
<link rel="stylesheet" type="text/css" href="css/slicebox.css">
<link rel="stylesheet" type="text/css" href="css/custom.css">
<script src="js/modernizr.custom.46884.js"></script>
</head>

    サンプルのslicebox.cssコード（サンプルのcssは改変しています）（custom.cssはそのまま使用）

     a {
	outline: none;
}
.sb-slider li > a img {
	border: none;
}
.sb-slider img {
	max-width: 100%;
	display: block;
}
.sb-description {
	padding: 20px;
	bottom: 10px;
	left: 10px;
	right: 10px;
	z-index: 1000;
	position: absolute;
	background: #CBBFAE;
	background: rgba(190,176,155, 0.4);
	border-left: 4px solid rgba(255,255,255,0.7);
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
	filter: alpha(opacity=0);
	opacity: 0;
	color: #fff;
	-webkit-transition: all 200ms;
	-moz-transition: all 200ms;
	-o-transition: all 200ms;
	-ms-transition: all 200ms;
	transition: all 200ms;
}
.sb-slider li.sb-current .sb-description {
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
	filter: alpha(opacity=80);
	opacity: 1;
}
.sb-slider li.sb-current .sb-description:hover {
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=99)";
	filter: alpha(opacity=99);
	background: rgba(190,176,155, 0.7);
}
.sb-perspective {
	position: relative;
}
.sb-perspective > div {
	position: absolute;
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	-o-transform-style: preserve-3d;
	-ms-transform-style: preserve-3d;
	transform-style: preserve-3d;
	-webkit-backface-visibility : hidden;
	-moz-backface-visibility : hidden;
	-o-backface-visibility : hidden;
	-ms-backface-visibility : hidden;
	backface-visibility : hidden;
}
.sb-side {
	margin: 0;
	display: block;
	position: absolute;
	-moz-backface-visibility : hidden;
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	-o-transform-style: preserve-3d;
	-ms-transform-style: preserve-3d;
	transform-style: preserve-3d;
}
    ・</body>の直前にjsファイルを読み込ませるためのコードを記述。
    <!--googleのCDN（ネットワーク経由でコンテンツを提供するサービス）よりjqueryをロード-->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<!--ダウンロードしたファイル-->
<script type="text/javascript" src="js/jquery.slicebox.js"></script>
<!--javascript追記-->
<script type="text/javascript">

	$(function() {
		var Page = (function() {
			var $navArrows = $('#nav-arrows').hide(),
				$shadow = $('#shadow').hide(),
				slicebox = $('#sb-slider').slicebox({
					onReady: function() {
						$navArrows.show();
						$shadow.show();
					},
					orientation: 'r',
					cuboidsRandom: true,
					disperseFactor: 30,
					autoplay: true
				}),
				init = function() {
					initEvents();
				},
				initEvents = function() {
					// add navigation events
					$navArrows.children(':first').on('click', function() {
						slicebox.next();
						return false;
					});
					$navArrows.children(':last').on('click', function() {
						slicebox.previous();
						return false;
					});
				};
			return {
				init: init
			};
		})();
		Page.init();
	});
</script>
</body>
    ・<body></body>内にコードを記述 
      <ul id="sb-slider" class="sb-slider">
    <li> <a href="http://www.flickr.com/photos/strupler/2969141180" target="_blank"> <img src="images/1.jpg" alt="image1"/> </a>
      <div class="sb-description">
        <h3>Creative Lifesaver</h3>
      </div>
    </li>
    <li> <a href="http://www.flickr.com/photos/strupler/2968268187" target="_blank"> <img src="images/2.jpg" alt="image2"/> </a>
      <div class="sb-description">
        <h3>Honest Entertainer</h3>
      </div>
    </li>
    <li> <a href="http://www.flickr.com/photos/strupler/2968114825" target="_blank"> <img src="images/3.jpg" alt="image1"/> </a>
      <div class="sb-description">
        <h3>Brave Astronaut</h3>
      </div>
    </li>
    <li> <a href="http://www.flickr.com/photos/strupler/2968122059" target="_blank"> <img src="images/4.jpg" alt="image1"/> </a>
      <div class="sb-description">
        <h3>Affectionate Decision Maker</h3>
      </div>
    </li>
    <li> <a href="http://www.flickr.com/photos/strupler/2969119944" target="_blank"> <img src="images/5.jpg" alt="image1"/> </a>
      <div class="sb-description">
        <h3>Faithful Investor</h3>
      </div>
    </li>
    <li> <a href="http://www.flickr.com/photos/strupler/2968126177" target="_blank"> <img src="images/6.jpg" alt="image1"/> </a>
      <div class="sb-description">
        <h3>Groundbreaking Artist</h3>
      </div>
    </li>
    <li> <a href="http://www.flickr.com/photos/strupler/2968945158" target="_blank"> <img src="images/7.jpg" alt="image1"/> </a>
      <div class="sb-description">
        <h3>Selfless Philantropist</h3>
      </div>
    </li>
  </ul>
  <div id="shadow" class="shadow"> </div>
  <div id="nav-arrows" class="nav-arrows"> <a href="#"> Next </a> <a href="#"> Previous </a> </div>

    サンプルのhtmlコード

    <!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<title>Slicebox 3D Image Slider</title>
<link rel="stylesheet" type="text/css" href="css/slicebox.css" />
<link rel="stylesheet" type="text/css" href="css/custom.css" />
<script type="text/javascript" src="js/modernizr.custom.46884.js"></script>
</head>

<body>
<div class="container">
  <ul id="sb-slider" class="sb-slider">
    <li> <a href="https://www.flickr.com/photos/strupler/2969141180" target="_blank"> <img src="images/1.jpg" alt="image1"/> </a>
      <div class="sb-description">
        <h3>Creative Lifesaver</h3>
      </div>
    </li>
    <li> <a href="http://www.flickr.com/photos/strupler/2968268187" target="_blank"> <img src="images/2.jpg" alt="image2"/> </a>
      <div class="sb-description">
        <h3>Honest Entertainer</h3>
      </div>
    </li>
    <li> <a href="http://www.flickr.com/photos/strupler/2968114825" target="_blank"> <img src="images/3.jpg" alt="image1"/> </a>
      <div class="sb-description">
        <h3>Brave Astronaut</h3>
      </div>
    </li>
    <li> <a href="http://www.flickr.com/photos/strupler/2968122059" target="_blank"> <img src="images/4.jpg" alt="image1"/> </a>
      <div class="sb-description">
        <h3>Affectionate Decision Maker</h3>
      </div>
    </li>
    <li> <a href="http://www.flickr.com/photos/strupler/2969119944" target="_blank"> <img src="images/5.jpg" alt="image1"/> </a>
      <div class="sb-description">
        <h3>Faithful Investor</h3>
      </div>
    </li>
    <li> <a href="http://www.flickr.com/photos/strupler/2968126177" target="_blank"> <img src="images/6.jpg" alt="image1"/> </a>
      <div class="sb-description">
        <h3>Groundbreaking Artist</h3>
      </div>
    </li>
    <li> <a href="http://www.flickr.com/photos/strupler/2968945158" target="_blank"> <img src="images/7.jpg" alt="image1"/> </a>
      <div class="sb-description">
        <h3>Selfless Philantropist</h3>
      </div>
    </li>
  </ul>
  <div id="shadow" class="shadow"> </div>
  <div id="nav-arrows" class="nav-arrows"> <a href="#"> Next </a> <a href="#"> Previous </a> </div>
</div>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.slicebox.js"></script>
<script type="text/javascript">
	$(function() {
		var Page = (function() {
			var $navArrows = $('#nav-arrows').hide(),
				$shadow = $('#shadow').hide(),
				slicebox = $('#sb-slider').slicebox({
					onReady: function() {
						$navArrows.show();
						$shadow.show();
					},
					orientation: 'r',
					cuboidsRandom: true,
					disperseFactor: 30,
					autoplay: true
				}),
				init = function() {
					initEvents();
				},
				initEvents = function() {
					// add navigation events
					$navArrows.children(':first').on('click', function() {
						slicebox.next();
						return false;
					});
					$navArrows.children(':last').on('click', function() {
						slicebox.previous();
						return false;
					});
				};
			return {
				init: init
			};
		})();
		Page.init();
	});
</script>
</body>
</html>
  4. ファイル1式をサーバーにアップロードして設置完了。
    サンプル